<template>
  <el-dialog
    :model-value="dialogFormVisible"
    :title="title"
    align-center
    draggable
    width="28%"
    style="border-radius: 10px; padding: 5px 10px"
  >
    <el-form :model="form" label-width="120px">
      <el-form-item label="岗位名称" class="ins">
        {{form.position}}
      </el-form-item>
      <el-form-item label="四级审核人员" v-if="form.positionType == 4 ||form.positionType == 5">
        <el-select filterable
          remote 
          v-model="form.fourthAssessorId" placeholder="请选择四级审核人员">
          <el-option
            v-for="item in FourthCeoOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            {{ item.name }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="四级审核限时" v-if="form.positionType == 4 ||form.positionType == 5">
        <el-select v-model="form.fourthTimer" placeholder="请选择四级审核限时">
          <el-option
            v-for="item in timer"
            :key="item.id"
            :label="item.name"
            :value="item.value"
          >
            {{ item.name }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级审核人员" v-if="form.positionType == 4 || form.positionType == 5">
        <el-select filterable
          remote
          v-model="form.thirdAssessorId" placeholder="请选择三级审核人员">
          <el-option
            v-for="item in ThirdCeoOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            {{ item.name }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级审核限时" v-if="form.positionType == 4 || form.positionType == 5">
        <el-select v-model="form.thirdTimer" placeholder="请选择三级审核限时">
          <el-option
            v-for="item in timer"
            :key="item.id"
            :label="item.name"
            :value="item.value"
          >
            {{ item.name }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="二级审核人员"
        v-if="form.positionType == 4 || form.positionType == 5 || form.positionType==3"
      >
        <el-select filterable
          remote v-model="form.secondAssessorId" placeholder="请选择二级审核人员">
          <el-option
            v-for="item in SecondCeoOption"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
            {{ item.name }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级审核限时" v-if="form.positionType == 4 || form.positionType == 5 || form.positionType==3">
        <el-select v-model="form.secondTimer" placeholder="请选择二级审核限时">
          <el-option
            v-for="item in timer"
            :key="item.id"
            :label="item.name"
            :value="item.value"
          >
            {{ item.name }}
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button style="width: 100px;" type="primary" @click="onSubmit"
          >修改</el-button
        >
        <el-button style="width: 100px" @click="onClose">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {ref, onMounted,onBeforeMount, reactive,watch} from "vue";
import { getAssessor, getEmpList } from "@/api/employee";
import {updateAssessorTimer} from "@/api/assessor"
import { ElMessage } from "element-plus";

const dialogFormVisible = ref(false);
const props = defineProps({
  dialogFormVisible: {
    type: Boolean,
    required: true,
  },
  close: {
    type: Function,
    default: () => {},
  },
  update: {
    type: Function,
    default: () => {},
  },
  editForm: {
    type: Object,
    required: true,
  },
});
const timer = ref([
  { id: 1, name: "12小时", value: "PT12H" },
  { id: 2, name: "24小时", value: "P1D" },
  { id: 3, name: "36小时", value: "PT36H" },
  { id: 4, name: "48小时", value: "P2D" },
  { id: 5, name: "60小时", value: "PT60H" },
  { id: 6, name: "72小时", value: "P3D" },
]);

const form = ref([]);
const SecondCeoOption = ref([]);
const ThirdCeoOption = ref([]);
const FourthCeoOption = ref([]);
watch(props, (newValue, oldValue) => {
  form.value = newValue.editForm;

  getAssessor(2).then((data) => {
    SecondCeoOption.value=[]
    for (let i = 0; i < data.length; i++) {
        SecondCeoOption.value.push({
          name: data[i].name,
          id: String(data[i].id)
        })
    }
    //SecondCeoOption.value = data;
  });
  getAssessor(3).then((data) => {
    ThirdCeoOption.value=[]
    for (let i = 0; i < data.length; i++) {
        ThirdCeoOption.value.push({
          name: data[i].name,
          id: String(data[i].id)
        })
    }
    //ThirdCeoOption.value = data;
    });
  getAssessor(4).then((data) => {
    FourthCeoOption.value=[]
    for (let i = 0; i < data.length; i++) {
        FourthCeoOption.value.push({
          name: data[i].name,
          id: String(data[i].id)
        })
    }
    //FourthCeoOption.value = data;
  });
});

const onSubmit = () => {
  updateAssessorTimer(form.value).then((data) => {
    if (data.code == 200) {
      ElMessage({
        message: "编辑成功",
        type: "success",
      });
      props.close();
      props.update();
    } else {
      ElMessage.error("编辑失败");
    }
  });
};

const onClose = () => {
  props.close();
};
</script>
<style lang="scss" scoped >
::v-deep .el-form-item__label:before {
  content: "* ";
  color: red;
}
.ins {
  ::v-deep .el-form-item__label:before {
    content: " ";
  }
}
</style>